<template>
	<view class="first_tab">
		<!-- url=`/pages/goods_detail/index?goods_id=${item.goods_id}` -->
		<view class="goods_item" v-for="item in goodsList" :key="item.goods_id" @click="navigatorToNewPage(item.goods_id)">
			<!-- 左侧图片容器 -->
			<view class="goods_item_warp">
				<image
					mode="widthFix"
					:src="item.goods_small_logo?item.goods_small_logo:'http://image4.suning.cn/uimg/b2c/newcatentries/0070175200-000000000763892692_2_800x800.jpg'"
				></image>
			</view>
			<!-- 右侧上品容器 -->
			<view class="goods_info_warp">
				<view class="goods_name">{{ item.goods_name }}</view>
				<view class="goods_price">￥{{ item.goods_price }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['goodsList'],
		methods:{
			navigatorToNewPage(id){
				this.$emit('gotoGoodsDetail',id)
			}
		}
	}
</script>

<style lang="scss" scoped>
.goods_item{
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 10rpx 0;
}
.goods_item_warp{
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
image{
  width: 70%;
}
.goods_info_warp{
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.goods_name{
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}
.goods_price{
  color:#ff5200;
  font-size: 32rpx;
  font-weight: bold;
}
</style>
